import { Box, Button, TextField } from '@mui/material';
import React, { JSX } from 'react';
import ResetPasswordDialog from '../PersonalDialog/ResetPasswordDialog';
import UpgradeMembershipDialog from '../PersonalDialog/UpgradeMembershipDialog';
import TrendingUpIcon from '@mui/icons-material/TrendingUp';
import KeyIcon from '@mui/icons-material/Key';
import { useAppDispatch, useAppSelector } from '../../actions/hooks';
import { profileActions, selectProfileLoaded, selectProfileName, selectProfileRoleName, selectProfileUid, selectProfileUserName } from '../../actions/Profile';
import '@fontsource/open-sans';

function PersonalInformation(): JSX.Element {

  const [openResetPassword, setOpenResetPassword] = React.useState<boolean>(false);
  const [openUpgradeMembership, setOpenUpgradeMembership] = React.useState<boolean>(false);

  const dispatch = useAppDispatch();

  const profileLoaded = useAppSelector(selectProfileLoaded);
  const uid = useAppSelector(selectProfileUid);
  const name = useAppSelector(selectProfileName);
  const userName = useAppSelector(selectProfileUserName);
  const roleName = useAppSelector(selectProfileRoleName);

  const handleResetPassword = () => {
    setOpenResetPassword(true);
  };

  const handleUpgradeMembership = () => {
    setOpenUpgradeMembership(true);
  };

  React.useEffect(() => {
    if (!profileLoaded) {
      dispatch(profileActions.fetchProfile());
    }
  });

  return (
    <>
      <Box sx={{ padding: '30px 30px 30px 30px', flex: 'none', flexGrow: 1 }}>
        <Box sx={{ width: '70%' }}>
          <Box sx={{
            fontFamily: 'Open Sans',
            fontStyle: 'normal',
            fontWeight: 600,
            fontSize: '22px',
            lineHeight: '125%',
            width: '100%'
          }}>
            个人信息
          </Box>
        </Box>
        <Box sx={{
          marginTop: '40px', fontFamily: 'Open Sans', fontWeight: 600,
          fontSize: '22px', display: 'flex', flexDirection: 'row', width: '100%'
        }}>
          {`${name} (@${userName})`}
        </Box>
        <Box sx={{ marginTop: '30px', height: '40px', fontFamily: 'Open Sans', fontSize: '16px', display: 'flex', flexDirection: 'row', width: '100%' }}>
          <Box sx={{ width: '140px', paddingTop: '10px', paddingBottom: '10px', fontWeight: 600, color: '#596A7C' }}>UID</Box>
          <Box sx={{ width: '350px', paddingTop: '10px', paddingBottom: '10px' }}>{uid}</Box>
        </Box>
        <Box sx={{ marginTop: '30px', height: '40px', fontFamily: 'Open Sans', fontSize: '16px', display: 'flex', flexDirection: 'row', width: '100%' }}>
          <Box sx={{ width: '140px', paddingTop: '10px', paddingBottom: '10px', fontWeight: 600, color: '#596A7C' }}>用户名</Box>
          <TextField sx={{ width: '350px' }} disabled={true} value={userName} size='small' />
        </Box>
        <Box sx={{ marginTop: '30px', height: '40px', fontFamily: 'Open Sans', fontSize: '16px', display: 'flex', flexDirection: 'row', width: '100%' }}>
          <Box sx={{ width: '140px', paddingTop: '10px', paddingBottom: '10px', fontWeight: 600, color: '#596A7C' }}>用户组</Box>
          <Box sx={{ width: '350px', paddingTop: '10px', paddingBottom: '10px' }}>{roleName}</Box>
        </Box>
        <Box sx={{ marginTop: '60px', height: '40px', fontFamily: 'Open Sans', fontSize: '16px', display: 'flex', flexDirection: 'row', width: '100%' }}>
          <Button
            variant='contained' startIcon={<KeyIcon />}
            sx={{ boxShadow: 'none', textTransform: 'none', width: '235px' }}
            disableElevation
            onClick={handleResetPassword}
          >
            重设密码
          </Button>
          <Box width='20px' />
          <Button
            variant='outlined' startIcon={<TrendingUpIcon />}
            sx={{ boxShadow: 'none', textTransform: 'none', width: '235px' }}
            onClick={handleUpgradeMembership}
          >
            升级用户组
          </Button>
        </Box>
      </Box>
      <ResetPasswordDialog
        open={openResetPassword}
        onClose={() => { setOpenResetPassword(false); }}
      />
      <UpgradeMembershipDialog
        open={openUpgradeMembership}
        onClose={() => { setOpenUpgradeMembership(false); }}
      />
    </>
  );
}

export default PersonalInformation;